<template>
  <div>
    <h1>维修记录</h1>
    <el-table :data="repairs" style="width: 100%" border stripe>
      <el-table-column prop="repairId" label="维修ID" width="120" />
      <el-table-column prop="anomalyId" label="异常ID" width="140" />
      <el-table-column prop="equipmentId" label="设备ID" width="140" />
      <el-table-column prop="processorId" label="处理人ID" width="120" />

      <el-table-column prop="repairResult" label="维修结果" width="120">
        <template #default="{ row }">
          <el-tag :type="row.repairResult === 1 ? 'success' : 'warning'">
            {{ row.repairResult === 1 ? '已完成' : '未完成' }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="repairImages" label="维修图片" width="120"/>
      <el-table-column prop="repairTime" label="维修时间" width="180" />
      <el-table-column prop="repairNotes" label="维修备注" />
      <el-table-column label="操作" width="120">
        <template #default="{ row }">
          <el-button
              v-if="row.repairResult === 0"
              type="primary"
              size="small"
              @click="changeProcessor(row)"
              style="box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);"
          >
            更换处理人
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 30]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        style="margin-top: 30px; text-align: right;"
    >
    </el-pagination>
  </div>
</template>


<style scoped>
.el-table {
  margin-top: 30px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.el-table::v-deep .el-table__row:hover {
  background-color: #f5f7fa;
}
</style>